<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jewel - Pieces Of UK (Visualizations)</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<link type="text/css" href="Styles/POUKindex.css" rel="stylesheet">
<link type="text/css" href="Styles/ui.all.css" rel="stylesheet">
 <link type="text/css" href="Styles/calendar.css" rel="stylesheet">
 <link type="text/css" href="Styles/visualizations.css" rel="stylesheet">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script src="Javascript/POUKindex.js" type="text/javascript"></script>
<script src="Javascript/calendar.js" type="text/javascript"></script>
<script src="Javascript/visualizations.js" type="text/javascript"></script>

<script src="Javascript/jquery.translate-1.2.5.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js" type="text/javascript"></script>
<!--
<script src="Javascript/jquery-ui-personalized-1.6rc6.js" type="text/javascript"></script>
-->
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="Jewel - Pieces Of UK." name="description">
<meta content="Jewel, Pieces, UK, music, singer, songwriter, Kilcher, Jewel Kilcher, Alaska, Spirit, Joy, Ride, Devil, movie, film, Lee, magazine, news, tour, live, Foolish, Games, Pieces Of You, This Way, Hands, Standing Still,lyrics, Intuition, 0304, sing, song, Wilkinson, Sword, razor, Bellefire, You, Were, Meant, For ,Me, Googbye Alice In Wonderland, Again, Goodbye, Alice, In, Wonderland, Again and Again" name="keywords">
</head>

<body>
<script type="text/javascript" charset="utf-8">
<!--
$("body").hide();
-->
</script>

<noscript>You need to enable Javascript to view this site at its best</noscript>
<div id="controlBar">
  <div id="menuContainer">
    <div id="homeMenu">
      <img class="tabsImg" src="Graphics/piecesofuk.png" width="16" height="16" alt="icon">
      <span class="menuText">Pieces Of UK</span>
      <span class="triangleIcon ui-icon ui-icon-triangle-1-s"></span>
    </div>
    <ul class="aMenu" id="menu">
      <li class="menuItem"><img class="tabsImg" src="Graphics/twitter.gif" width="16" height="16" alt="icon"><a id="twitterLink" href="twitter.html">Twitter</a></li>
      <li class="menuItem"><img class="tabsImg" src="Graphics/blogger.gif" width="16" height="16" alt="icon"><a id="POUKBlogLink" href="POUKBlog.html">Pieces Of UK Blog</a></li>
      <li class="menuItem"><img class="tabsImg" src="Graphics/jewelIco.gif" width="16" height="16" alt="icon"><a id="jewelsBlogLink" href="jewelsBlog.html">Jewel's Blog</a></li>
      <li class="menuItem"><img class="tabsImg" src="Graphics/calendar.gif" width="15" height="14" alt="icon"><a id="calendarLink" href="calendar.html">Calendar</a></li>
      <li class="menuItem"><img class="tabsImg" src="Graphics/latest.png" width="16" height="16" alt="icon"><a id="latestLink" href="latest.html">Latest</a></li>
      <li class="menuItem"><img class="tabsImg" src="Graphics/about.png" width="16" height="16" alt="icon"><a id="aboutLink" href="about.html">About</a></li>
      <li class="menuItem"><img class="tabsImg" src="Graphics/songs.png" width="16" height="16" alt="icon"><a id="songsLink" href="songs.html">Songs</a></li>
      <li class="menuItem"><img class="tabsImg" src="Graphics/visualizations.png" width="16" height="16" alt="icon"><a id="visualizationsLink" href="visualizations.html">Visualizations</a></li>
      <li class="menuItem"><img class="tabsImg" src="Graphics/singles.png" width="16" height="16" alt="icon"><a id="singlesLink" href="singles.html">Singles</a></li>
      <li class="menuItem"><img class="tabsImg" src="Graphics/youtube.gif" width="16" height="16" alt="icon"><a id="jewelTubeLink" href="jewelTube.html">JewelTube</a></li>
      <li class="menuItem"><img class="tabsImg" src="Graphics/home.png" width="16" height="16" alt="icon"><a id="homeLink" href="index.html">Home</a></li>
    </ul>
  </div>
  <div id="windowControl">
    <div id="showWindowsButton">
      <span class="menuText">Windows</span>
      <span style="margin-top: 2px;" class="triangleIcon ui-icon ui-icon-triangle-1-s"></span>
    </div>
    <ul class="aMenu" id="openWindows">
    </ul>
  </div>
  <div id="controls">
    <table class="aControl" id="calControls" cellpadding="0" cellspacing="0" width="500" align="center">
      <tr>
        <td class="prevNextBox"><a id="calPrevLink" href="#">Prev</a></td>
        <td id="calMonthFormTD">
          <form id="calMonthForm">
            <select id="calSelectMonth" name="month">
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
              <option value="9">September</option>
              <option value="10">October</option>
              <option value="11">November</option>
              <option value="12">December</option>
            </select>
            <select id="calSelectYear" name="month">
              <option value="2007">2007</option>
              <option value="2008">2008</option>
              <option value="2009">2009</option>
            </select>
            <input id="calGoButton" type="button" value="go">
          </form>
        </td>
        <td class="prevNextBox"><a id="calNextLink" href="#">Next</a></td>
        <td id="calViewFormTD">
          <form id="calViewForm">
            View Mode:
            <select id="calSelectView" name="month">
              <option value="Month">Month</option>
              <option value="List">List</option>
            </select>
          </form>
        </td>
				<td><img id="calChartsIcon" src="Graphics/pieIcon.png" width="24" height="16" alt="setlist piechart stats"></td>
      </tr>
    </table>



    <table class="aControl" id="visControls" cellpadding="0" cellspacing="0" width="650" align="center">
      <tr>
        <td id="visType">
          <form id="visTypeForm">
					 <select id="visOptions" name="month">
              <option value="blank">Choose a visualization...</option>
              <option value="setlists">Jewel albums by setlist</option>
              <option value="songsByYear">Jewel songs by year</option>
            </select>
            <span class="visSubControl" id="visSBYoptsForm">
             <span class="songTagsHead">Writer:</span>
             <span>Jewel<input id="visSBYWriterJewel" value="Jewel" checked="checked" name="tagSelector" type="checkbox"></span>
             <span>Jewel &amp; Other<input id="visSBYWriterJewelOther" value="JewelOther" checked="checked" name="tagSelector" type="checkbox"></span>
             <span>Other<input id="visSBYWriterOther" value="Other" checked="checked" name="tagSelector" type="checkbox"></span>
             <input id="visDrawButton" type="button" value="Draw">
            </span>
          </form>
        </td>
      </tr>
    </table>


  </div> <!-- end #controls -->
</div> <!-- end #controlBar -->

<!-- <div class="aView" id="calView"> -->
<div class="aDialog" id="calView">
  <div id="cblView"></div>
  <table cellpadding="0" cellspacing="0" id="cbmView" name="cbmView">
<!--  <tr><td colspan="7" id="cbmMonthHead"></td></tr> -->
  <tr id="cbmDaysHead">
   <td class="cbmDayHead">Sunday</td>
   <td class="cbmDayHead">Monday</td>
   <td class="cbmDayHead">Tuesday</td>
   <td class="cbmDayHead">Wednesday</td>
   <td class="cbmDayHead">Thursday</td>
   <td class="cbmDayHead">Friday</td>
   <td class="cbmDayHead">Saturday</td>
  </tr>
  <tr class="cbmWeek" id="week1">
   <td valign="top" class="cbmDay" id="week1day0"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week1day1"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week1day2"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week1day3"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week1day4"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week1day5"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week1day6"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   </tr>
  <tr class="cbmWeek" id="week2">
   <td valign="top" class="cbmDay" id="week2day0"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week2day1"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week2day2"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week2day3"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week2day4"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week2day5"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week2day6"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   </tr>
  <tr class="cbmWeek" id="week3">
   <td valign="top" class="cbmDay" id="week3day0"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week3day1"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week3day2"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week3day3"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week3day4"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week3day5"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week3day6"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   </tr>
  <tr class="cbmWeek" id="week4">
   <td valign="top" class="cbmDay" id="week4day0"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week4day1"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week4day2"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week4day3"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week4day4"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week4day5"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week4day6"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   </tr>
  <tr class="cbmWeek" id="week5">
   <td valign="top" class="cbmDay" id="week5day0"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week5day1"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week5day2"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week5day3"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week5day4"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week5day5"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week5day6"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   </tr>
  <tr class="cbmWeek" id="week6">
   <td valign="top" class="cbmDay" id="week6day0"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week6day1"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week6day2"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week6day3"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week6day4"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week6day5"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   <td valign="top" class="cbmDay" id="week6day6"><div class="cbmDateDiv"></div><div class="cbmContentDiv"></div></td>
   </tr>
 </table>
</div> <!-- id=calView -->

<div class="aDialog" id="visualizations">
 <div id="visHead">Available visualizations...</div>
 <div id="visDiv">
	<table border="0" cellpadding="0" cellspacing="0">
	 <tr>
		<td><img class="visOptionImg" src="Graphics/visSongsByYear.gif"></td>
		<td><img class="visOptionImg" src="Graphics/visAlbumsBySetlists.gif"></td>
		</tr>
	 <tr>
		<td><b>Songs by year</b></td>
		<td><b>Albums by setlists</b></td>
		</tr>
	 <tr><td><br><br></td></tr>
	 </table>
 </div>
 <!-- changes made here should also be made in visualizations.html and vice versa -->
 <div id="visDescriptions">
	<span class="aVisDescription" id="visOverview">The visualizations are graphs and charts, generated using the
 <a href="http://code.google.com/apis/visualization/" target="_blank">Google Visualization API</a>, of
 various Jewel-related data, eg songs and setlists. Select a
 visualization by clicking an image or by using the drop-down menu in the control bar at the top of the page.
 More visualizations are planned for the future. If you have an idea for a visualization then please let me
 know.</span>
	<span class="aVisDescription" id="visSongsByYearDesc">This chart will give totals by year of the number of songs Jewel has written or
	first performed in that year. So you can see at a glance when Jewel was most prolific and when she was taking
	a rest. You can view graphs of songs written just by Jewel, by Jewel and someone else or songs written by
	others. Select the options in the control bar at the top and click Draw. If you want a larger view of the graphs
	then resize this window and then click Draw again. If you click on a point within the graph then you will see all
	the songs for that particular year.</span>
	<span class="aVisDescription" id="visAlbumSetlists">This visualization generates pie-charts showing a breakdown
	of the songs from a setlist by Jewel album. Click on any concert on the calendar with a setlist to view the
	pie-chart. If you then click on a pie segment you will see the songs performed from	the album.</span>
 </div>
 <div id="visFooter"></div>
 <div id="visErrors"></div>
</div>

 <div class="aDialog" id="visSummary"></div>


<script type="text/javascript" charset="utf-8">
<!--
$(document).ready( function() {
 PIECESOFUK.menusInit();
 PIECESOFUK.initVisualizations();
});


-->
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7863523-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
